import React, { useState, useEffect } from 'react';
import { 
  Box, 
  Typography, 
  Paper, 
  CircularProgress,
  IconButton,
  Stack,
  Card,
  CardContent,
  Grid
} from '@mui/material';
import { ArrowBack as ArrowBackIcon } from '@mui/icons-material';
import { useNavigate } from 'react-router-dom';
import { invoke } from '@tauri-apps/api/core';

const OsInfoPage = () => {
  const navigate = useNavigate();
  const [osInfo, setOsInfo] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    loadOsInfo();
  }, []);

  const loadOsInfo = async () => {
    try {
      const info = await invoke('get_os_info');
      setOsInfo(info);
      setLoading(false);
    } catch (err) {
      setError(err.toString());
      setLoading(false);
    }
  };

  const infoItems = [
    { label: '操作系统平台', value: osInfo?.platform },
    { label: '系统架构', value: osInfo?.arch },
    { label: '主机名', value: osInfo?.hostname },
    { label: '系统家族', value: osInfo?.family },
    { label: '系统类型', value: osInfo?.os_type },
    { label: '系统版本', value: osInfo?.os_version },
    { label: '系统语言', value: osInfo?.locale || '未知' },
    { label: '可执行文件扩展名', value: osInfo?.exe_extension || '无' },
  ];

  return (
    <Box sx={{ p: 3 }}>
      <Stack direction="row" alignItems="center" spacing={2} sx={{ mb: 3 }}>
        <IconButton 
          onClick={() => navigate('/')}
          sx={{ color: 'text.primary' }}
        >
          <ArrowBackIcon />
        </IconButton>
        <Typography variant="h4" component="h1">
          系统信息
        </Typography>
      </Stack>

      {loading ? (
        <Box display="flex" justifyContent="center" alignItems="center" minHeight="200px">
          <CircularProgress />
        </Box>
      ) : error ? (
        <Paper sx={{ p: 3, bgcolor: '#fff3f3' }}>
          <Typography color="error">
            获取系统信息失败: {error}
          </Typography>
        </Paper>
      ) : (
        <Grid container spacing={3}>
          {infoItems.map((item, index) => (
            <Grid item xs={12} sm={6} md={4} key={index}>
              <Card sx={{ height: '100%' }}>
                <CardContent>
                  <Typography variant="subtitle2" color="text.secondary" gutterBottom>
                    {item.label}
                  </Typography>
                  <Typography variant="h6">
                    {item.value}
                  </Typography>
                </CardContent>
              </Card>
            </Grid>
          ))}
        </Grid>
      )}
    </Box>
  );
};

export default OsInfoPage; 